<template>
  <div class="root">
    <div class="wai">
      <el-table
        :data="tableData"
        style="
          --el-color-white: transparent;
          --el-text-color-regular: azure;
          --el-text-color-secondary: #909399;
          --el-background-color-base: transparent;
        "
      >
        <el-table-column prop="stuno" label="学号" />
        <el-table-column prop="stuname" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="classno" label="班号" />
        <el-table-column label="编辑 / 删除">
          <template #default="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        style="
          --el-color-white: transparent;
          --el-text-color-primary: azure;
          --el-text-color-regular: azure;
          --el-color-primary: #f56c6c;
          margin-top: 50px;
        "
        layout="prev, pager, next, jumper"
        :total="(this.data.length * 10) / 5"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
    <el-dialog v-model="showd1"
      ><el-form
        label-width="120px"
        style="--el-color-primary: rgb(67, 153, 149)"
      >
        <div class="curtitle">
          <i class="el-icon-warning"></i> {{ curtitle }}
        </div>
        <el-form-item label="学生姓名">
          <el-input v-model="stuname"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄">
          <el-input v-model="age"></el-input>
        </el-form-item>
        <el-form-item label="所在班号">
          <el-input-number
            v-model="classno"
            :min="1"
            :max="45"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            style="background-color: rgb(67, 153, 149); color: azure"
            @click="saveInfo"
            >保存</el-button
          >
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="showd2"
      ><el-form
        label-width="120px"
        style="--el-color-primary: rgb(67, 153, 149)"
      >
        <div class="curtitle">
          <i class="el-icon-warning"></i> {{ curtitle }}
        </div>
        <div>是否确定删除？</div>
        <div style="margin-top: 30px">
          <el-button
            style="background-color: rgb(67, 153, 149); color: azure"
            @click="exeDelete"
            >确定</el-button
          >
          <el-button @click="cancel2">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { ElNotification } from "element-plus";
export default {
  data() {
    return {
      curpage: 1,
      classno: 1,
      stuname: "",
      age: "",
      tableData: [],
      data: [],
      showd1: false,
      showd2: false,
      curtitle: "",
      curno: "",
    };
  },
  created() {
    axios.get("http://localhost:8082/").then((res) => {
      this.data = res.data;
      this.$store.state.total = this.data.length;
      console.log(this.data);
      this.tableData = this.data.slice(0, 5);
    });
  },

  methods: {
    handlePage(cur) {
      this.tableData = this.data.slice((cur - 1) * 5, cur * 5);
    },
    handleEdit(index, row) {
      this.showd1 = true;
      this.curtitle = "您正在修改编号为" + row.stuno + "的学生信息";
      this.curno = row.stuno;
      console.log(index);
    },
    handleDelete(index, row) {
      this.showd2 = true;
      this.curtitle = "您正在删除编号为" + row.stuno + "的学生信息";
      this.curno = row.stuno;
      console.log(index);
    },
    saveInfo() {
      this.showd1 = false;
      if (this.classno < 10) this.classno = "0" + this.classno;
      axios
        .get("http://localhost:8082/update", {
          params: {
            stuno: this.curno,
            stuname: this.stuname,
            age: this.age,
            classno: this.classno,
          },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data == "error") {
            ElNotification({
              title: "修改信息失败",
              message: "请检查相关信息填写是否符合要求",
              duration: 2000,
            });
          } else {
            ElNotification({
              title: "学生表变动",
              message: "成功修改学生信息",
              type: "success",
              duration: 2000,
            });
            axios.get("http://localhost:8082/").then((res) => {
              this.data = res.data;
              this.$store.state.total = this.data.length;
              console.log(this.data);
              this.tableData = this.data.slice(0, 5);
            });
          }
        });
    },
    exeDelete() {
      this.showd2 = false;
      axios
        .get("http://localhost:8082/delete", {
          params: {
            stuno: this.curno,
          },
        })
        .then((res) => {
          console.log(res.data);
          ElNotification({
            title: "学生表变动",
            message: "成功删除学生信息",
            type: "success",
            duration: 2000,
          });
          axios.get("http://localhost:8082/").then((res) => {
            this.data = res.data;
            this.$store.state.total = this.data.length;
            console.log(this.data);
            this.tableData = this.data.slice(0, 5);
          });
        });
    },
    cancel() {
      this.showd1 = false;
    },
    cancel2() {
      this.showd2 = false;
    },
  },
};
</script>

<style scoped>
.title {
  margin-bottom: 30px;

  font-weight: bold;
  font-size: 26px;
  color: rgb(222, 238, 237);
}
.wai {
  width: 60%;
  margin: 30px auto;
  border: 1px solid azure;
}
.curtitle {
  margin-bottom: 30px;
  font-weight: bold;
  color: rgb(67, 153, 149);
}
</style>